<template>
    <div class="router-view-wrapper add-new-tray">
        <ButtonBar class="button-bar" :hideRightBar="true" />
        <div class="form-body">
            <div class="tray-info-wrapper">

            </div>
            <TrayCell class="tray-cell-view" :columnCount="2" :rowCount="18" viewType="tray-bind" />
        </div>
    </div>
</template>
<script setup>
import { lang } from '../../lang';
import TrayCell from '../../components/TrayCell.vue';
import ButtonBar from '../../components/ButtonBar.vue';

const props = defineProps([
    "request",
    "success",
    "warning",
    "info",
    "error",
    "loading",
    "confirm",
    "closeLoading",
]);


</script>
<style scoped lang="less">
@import "../../index.less";
@tray-info-wrapper-width: 20vw;
@button-bar-height: 60px;

.add-new-tray {
    .button-bar {
        width: calc(~"@{page-wrapper-width} - @{sider-width} - 20px");
        height: calc(~"@{button-bar-height} - 1px");
        border-bottom: 1px solid black;
        margin: 0 10px;
    }

    .form-body {
        display: flex;

        .tray-info-wrapper {
            width: calc(~"@{tray-info-wrapper-width} - 1px");
            height: calc(~"@{page-wrapper-height} - @{header-height} - @{button-bar-height}");
            border-right: 1px solid #f1f1f1;
        }

        .tray-cell-view {
            width: calc(~"@{page-wrapper-width} - @{sider-width} - @{tray-info-wrapper-width}");
            height: calc(~"@{page-wrapper-height} - @{header-height} - @{button-bar-height}");
        }
    }
}
</style>